<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <script src="index.js"></script>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<div id="app">
   <!--<iframe src="http://www.jd.com" name="hyda" width="100%" height="100%" frameborder="0" />-->

   <el-table
           :data="tableData"
           border
           style="width: 100%">
       <el-table-column
               fixed
               prop="date"
               label="日期"
               width="150">
       </el-table-column>
       <el-table-column
               prop="name"
               label="姓名"
               width="120">
       </el-table-column>
       <el-table-column
               prop="province"
               label="省份"
               width="120">
       </el-table-column>
       <el-table-column
               prop="city"
               label="市区"
               width="120">
       </el-table-column>
       <el-table-column
               prop="address"
               label="地址"
               width="300">
       </el-table-column>
       <el-table-column
               prop="zip"
               label="邮编"
               width="120">
       </el-table-column>
       <el-table-column
               fixed="right"
               label="操作"
               width="100">
           <template slot-scope="scope">
               <el-button @click="deleteById(scope.row)" type="text" size="small">删除</el-button>
               <el-button type="text" @click="open1" size="small">编辑</el-button>
           </template>
       </el-table-column>
   </el-table>
</div>
<script>
    let  vm = new Vue({
        el:"#app",
        methods:{
            deleteById(row) {
                console.log(row);
                this.$confirm('确定删除这条数据吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                    type: 'success',
                    message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                    type: 'info',
                    message: '已取消删除'
                    });
                });
            },
            open1(){
                this.$message.error("错误消息")
            }
        },
        data() {
            return {
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1517 弄',
                    zip: 200333
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1519 弄',
                    zip: 200333
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1516 弄',
                    zip: 200333
                }]
            }
        }
    })
</script>
</body>
</html>